<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>分类参数管理</span>
            </div>
        </template>
        <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon :closable="false"></el-alert>
        <el-form label-width="120px" size="default">
            <el-form-item label="选择商品分类：">
                <el-cascader clearable filterable v-model="catId" @change="loadParamByCatId(activePane)"
                    :options="categories" :props="{
                        label: 'cat_name',
                        value: 'cat_id'
                    }"></el-cascader>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activePane">
            <el-tab-pane label="动态参数" name="many">
                <el-table border size="default" :data="params.many">
                    <el-table-column type="expand" label="明细" width="60">
                        <template #default="{ row }">
                            <el-tag size="default" closable type v-for="(item, index) in row.attr_vals.split(',')"
                                :key="index">{{ item }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <el-table-column prop="attr_name" label="属性名称"></el-table-column>
                    <el-table-column label="操作" width="200">

                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="静态属性" name="only">
                <el-table border size="default" :data="params.only">
                    <el-table-column type="expand" label="明细" width="60">
                        <template #default="{ row }">
                            <el-tag size="default" closable type v-for="(item, index) in row.attr_vals.split(',')"
                                :key="index">{{ item }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <el-table-column prop="attr_name" label="属性名称"></el-table-column>
                    <el-table-column label="操作" width="200">

                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>
<script setup>
import { ref,watch } from "vue";
import categoriesApi from "@/api/categories.js";

let activePane = ref("many")
let categories = ref([])
let catId = ref(null)
let params = ref({
    many: [],
    only: []
})

const loadParamByCatId = async function(pt = "many"){
    if (!catId.value || catId.value.length < 3) {
        return;
    }
    let cid = catId.value[2];
    params.value[pt] = await categoriesApi.loadCategoriesAttributes(cid, pt)
}
const loadCategorieList = async function(){
    categories.value = await categoriesApi.loadCategories()
}
loadCategorieList()

watch(activePane,(nv)=>{
    loadParamByCatId(nv)
})
</script>

<style lang="scss" scoped>
.el-card {
    display: flex;
    flex-flow: column;

    :deep(.el-card__body) {
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        height: 100%;
        overflow: hidden;
    }
}

.edit-bar {
    padding-bottom: 20px;

    .el-input {
        width: 400px;
        margin-right: 50px;
    }
}

.el-pagination {
    text-align: center;
    padding-top: 20px;
}

.el-alert {
    margin-bottom: 20px;
}
.el-tabs{
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-flow: column;
}
.el-tab-pane{
    height: 100%;
}
.el-table{
    height: 100%;
}
.el-table :deep(.el-table__expanded-cell) {
    padding: 20px;
}
.el-tag{
    margin-right: 20px;
}
</style>